<template>
	<view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
		<live-pusher
			id="livePusher"
			ref="livePusher"
			class="livePusher"
			mode="FHD"
			beauty="0"
			whiteness="0"
			:aspect="aspect"
			min-bitrate="1000"
			audio-quality="16KHz"
			device-position="back"
			:auto-focus="true"
			:muted="true"
			:enable-camera="true"
			:enable-mic="false"
			:zoom="false"
			@statechange="statechange"
			:style="{ width: windowWidth, height: windowHeight }"
		></live-pusher>

		<cover-view class="header">
			<text class="text1">AR识别</text>
			<view class="cls">
				<view class="icon" @click="gotoSearchPage">
					<image src="/static/搜索 (1).png"  class="img"></image>
				</view>
				
				<view class="icon" @click="gotoSortPage">
					<image src="/static/分类.png"  class="img"></image>
				</view>
			</view>
		</cover-view>
		<cover-view class="camera2">
			<view class="01"></view>
			<view class="02"></view>
			<view class="03"></view>
			<view class="04"></view>
			<view class="05"></view>
			<view class="06"></view>
			<view class="07"></view>
			<view class="08"></view>
		</cover-view>
		<cover-view class="footer" >
			<!-- <button class="btn" @click="captureScreenshot">识别结果</button> -->
			<button class="btn" @click="snapshot">识别结果</button>
		</cover-view>
		<canvas canvas-id="screenshotCanvas" style="width: 100%; height: 100vh; position: absolute; top: -9999px; left: -9999px;"></canvas>
   
		<cover-view class="tabbar">
			<view 
			class="tab" 
			v-for="(item,index) in tabbarList" 
			:key='index'
			@tap='navigateTo(item.pagePath)'
			>
				<image class="img" v-if='item.pagePath===cureentPage' :src="item.selectedIconPath" mode=""></image>
				<image class="img" v-else :src="item.iconPath" mode=""></image>
				<view class="txt"><text class="texc">{{item.text}}</text></view>
			</view>
		</cover-view>
	</view>
</template>

<script>
let _this = null;
export default {
	props:{
		cureentPage:{
			type:String,
			dafault:'index'
		}
	},
	data() {
		return {
			poenCarmeInterval:null,//打开相机的轮询
			aspect: '2:3', //比例
			windowWidth: '', //屏幕可用宽度
			windowHeight: '', //屏幕可用高度
			camerastate: false, //相机准备好了
			livePusher: null, //流视频对象
			snapshotsrc: null ,//快照
			tabbarList: [{
						"iconPath": "/static/首页未.png",
						"selectedIconPath": "/static/首页点.png",
						"pagePath": "index",
						"text": "首页"
					},
					{
						"iconPath": "/static/fx.png",
						"selectedIconPath": "/static/发现点.png",
						"pagePath": "finding",
						"text": "发现"
					},
					{
						"iconPath": "/static/识别未.png",
						"selectedIconPath": "/static/识别点.png",
						"pagePath": "guide",
						"text": "识别"
					},
					{
						"iconPath": "/static/商城未.png",
						"selectedIconPath": "/static/商城点.png",
						"pagePath": "shopping",
						"text": "商城"
					},
			
					{
						"iconPath": "/static/个人未.png",
						"selectedIconPath": "/static/个人点.png",
						"pagePath": "my",
						"text": "个人"
					}],
			imageTempPath: '',      // 截图图片的临时路径
			serverResponseData: ''  // 服务器返回的数据
		};
	},
	onLoad(e) {
		_this = this;
		this.initCamera();
	},
	onReady() {
		this.livePusher = uni.createLivePusherContext('livePusher', this);
		this.startPreview(); //开启预览并设置摄像头
		this.poenCarme();
	},
	methods: {
		
		//轮询打开
		poenCarme(){
			//#ifdef APP-PLUS
			if (plus.os.name == 'Android') {
				this.poenCarmeInterval = setInterval(function() {
					// console.log(_this.camerastate);
					if (!_this.camerastate) _this.startPreview();
				}, 2500);
			}
			//#endif
		},
		//初始化相机
		initCamera() {
			uni.getSystemInfo({
				success: function(res) {
					_this.windowWidth = res.windowWidth;
					_this.windowHeight = res.windowHeight;
					let zcs = _this.aliquot(_this.windowWidth,_this.windowHeight);
					_this.aspect = (_this.windowWidth/zcs)+':'+(_this.windowHeight/zcs);
					console.log('画面比例：'+_this.aspect);
				}
			});
		},
		//整除数计算
		aliquot(x, y) {
			if (x % y == 0) return y;
			return this.aliquot(y, x % y);
		},
		//开始预览
		startPreview() {
			this.livePusher.startPreview({
				success: a => {
					console.log(a)
				}
			});
		},
		//停止预览
		stopPreview() {
			this.livePusher.stopPreview({
				success: a => {
					_this.camerastate = false; //标记相机未启动
				}
			});
		},
		//状态
		statechange(e) {
			//状态改变
			// console.log(e);
			if (e.detail.code == 1007) {
				_this.camerastate = true;
			} else if (e.detail.code == -1301)  {
				_this.camerastate = false;
			}
		},
		//抓拍
		snapshot() {
			//震动
			uni.vibrateShort({
			    success: function () {
			        console.log('success');
			    }
			});
			//拍照
			this.livePusher.snapshot({
				success: e => {
					console.log(e);
					// console.log(JSON.stringify(e));
					this.snapshotsrc = e.message.tempImagePath;
					const tempImagePath = e.message.tempImagePath;
					this.stopPreview();
					uni.navigateTo({
						  url: '/pages/guide/voice/voice?img=' + encodeURIComponent(JSON.stringify(this.snapshotsrc  ))
					});
				
						
							
					// this.setImage();
					// uni.navigateBack();
					
						
					
				}
			});
		},
		//设置
		setImage() {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2]; //上一个页面
			//直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
			prevPage.$vm.setImage({ path: _this.snapshotsrc });
		},
		gotoSortPage(){
			// console.log("wocas");
				  uni.navigateTo({
				    url: '/pages/guide/sort/sort',
						// url: '/pages/guide/photograph/photograph'
				  })
		},
		gotoSearchPage(){
				 uni.navigateTo({
					  url:'/pages/guide/search/search',
						// url: '/pages/guide/text'
				 })
		},
		navigateTo(e) {
				
		    uni.redirectTo({
		      url: `../../pages/${e}/${e}`,
			  //animationType:"fade-in",
				
			  animationDuration:0,
		    })
		  
		}
		
	}
};
</script>

<style lang="scss">
.live-camera {
	background-color: rgba(0, 0, 0, 0.4);
	// justify-content: center;
	// align-items: center;
	.menu {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 180rpx;
		z-index: 98;
		align-items: center;
		justify-content: center;
		.menu-mask {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 180rpx;
			z-index: 98;
		}
		.menu-back {
			position: absolute;
			left: 30rpx;
			bottom: 50rpx;
			width: 80rpx;
			height: 80rpx;
			z-index: 99;
			align-items: center;
			justify-content: center;
		}
		.menu-snapshot {
			width: 130rpx;
			height: 130rpx;
			z-index: 99;
		}
		.menu-flip {
			position: absolute;
			right: 30rpx;
			bottom: 50rpx;
			width: 80rpx;
			height: 80rpx;
			z-index: 99;
			align-items: center;
			justify-content: center;
		}
	}
}
.com{
	width: 750rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: absolute;
	bottom: 0;
	.vie{
		width: 50px;
		height: 50px;
		background-color: red;
	}
}
.header{
	width: 750rpx;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	position: absolute;
	top: 150rpx;
	padding: 20rpx 45rpx;
	
	.text1{
		font-size: 50rpx;
		color:white;
		
	}
	.cls{
		display: flex;
		// justify-content: space-between;
		flex-direction: row;
		position: relative;
		top: 0rpx;
		right: 0;
		margin-top: 20rpx;
	}
	
	.icon{ 
		width: 40rpx;
		height:40rpx;
		margin-right: 18rpx;
		// padding: 2rpx;
		align-items: center;
		.img{
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.camera2{
	width: 550rpx;
	height: 850rpx;
	background-color: rgba(255,255,255, 0);
	// border-radius: 10rpx;
	// border:1px solid white;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 330rpx;
	margin-left: 100rpx;
	
	.01{
		width: 200rpx;
		height: 8rpx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
	}
	.02{
		width: 200rpx;
		height: 8rpx;
		position: absolute;
		top: 0;
		right: 0;
		background-color: #ffffff;
	}
	.03{
		width: 8rpx;
		height: 300rpx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
	}
	.04{
		width: 8rpx;
		height: 300rpx;
		position: absolute;
		top: 0;
		right: 0;
		background-color: #ffffff;
	}
	.05{
		width: 8rpx;
		height: 300rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
	}
	.06{
		width: 8rpx;
		height: 300rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #ffffff;
	}
	.07{
		width: 200rpx;
		height: 8rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
	}
	.08{
		width: 200rpx;
		height: 8rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #ffffff;
	}
}
.tabbar{
		border-top: 2rpx solid #636263;
		background-color: #FFFFFF;
		position: absolute;
		left: 0;
		bottom: 0;
		bottom: 0rpx;
		width: 750rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		padding: 0rpx 50rpx;
		z-index: 9999;
		
	.tab{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
	.img{
		width: 40rpx;
		height: 40rpx;
		
	}
	
}
.txt{
	padding: 10rpx 0;
	
	.texc{
		font-size: 24rpx;
	}
}
.footer{
	position: absolute;
	width: 650rpx;
	height: 80rpx;
	bottom: 200rpx;
	left: 0;
	margin-left: 50rpx;
	color: #fff;
	.btn{
		width: 650rpx;
		height: 80rpx;
		
		background-color:#44D7B6;
	}
}

</style>
